<template>
	<div class="layout" style="height: 100%;">
		<el-tabs v-model="activeName2" type="border-card" style="height: 100%;">
			<el-tab-pane label="设置" name="first" style="height: 100%;">
				<div class="container">
					<el-row class="tac" :gutter="20">
						<el-col :span="5" class="tree">
							<div class="dataSource">
								<el-tree class="elTree" :data="data1" :props="defaultProps" highlight-current :expand-on-click-node="false" @node-click="handleNodeClick" node-key="id" :default-expanded-keys="[1, 4]"></el-tree>
							</div>
						</el-col>
						<!-- <el-col :span="1">
							&nbsp;
						</el-col> -->
						<el-col  :span="18" style="margin-left:1%">
								<div class="breadcrumb">
						      <el-breadcrumb class="des" separator-class="el-icon-arrow-right">
						        <el-breadcrumb-item :to="{ path: '/dashboard/SystemManagement/System' }">参数配置
						        </el-breadcrumb-item>
						        <el-breadcrumb-item>{{bread1}}</el-breadcrumb-item>
						      </el-breadcrumb>
								</div>
								<div class="decorationLine"></div>
								<el-row>
			        		<span><mailTable :tableData="tableData" :tableStyle="{ width:'100%' }"></mailTable></span>
								</el-row>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
			<el-tab-pane label="用户管理" name="second" class="des" style="height: 100%;">
				<div class="container">
					<el-row class="tac" :gutter="20">
						<el-col :span="5" class="tree">
							<div class="dataSource">
								<el-tree class="elTree" :data="data2" :props="defaultProps" highlight-current :expand-on-click-node="false" @node-click="handleNodeClick" node-key="id" :default-expanded-keys="[1, 4]"></el-tree>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
			<el-tab-pane label="个人中心" name="third" class="des" style="height: 100%;">
				<div class="container des">
					<el-form ref="form" :model="form" label-width="70px" class="formStyle">
					  <el-form-item label="用户名" class="des">
					    <el-input v-model="form.name" disabled></el-input>
					  </el-form-item>
						<el-form-item label="密码">
							<el-input v-model="form.password" type="password" disabled></el-input>
						</el-form-item>
					</el-form>
					 <el-button  style="margin-left:40%;width:15%" type="primary" size="small"  plain  @click="dialogFormVisible = true">修改密码</el-button>
				</div>
				<el-dialog title="修改密码主页" :visible.sync="dialogFormVisible" 
				width="30%"
				center>
				  <el-form :model="formdata">
					    <el-form-item label="原密码" :label-width="formLabelWidth">
					      	<el-input v-model="formdata.password"  auto-complete="off"></el-input>
					    </el-form-item>
					    <el-form-item label="更改密码" :label-width="formLabelWidth">
					     	<el-input v-model="formdata.password1" type="password" auto-complete="off" placeholder="请输入更改密码"></el-input>
					    </el-form-item>
					    <el-form-item label="确认密码" :label-width="formLabelWidth">
					    	<el-input v-model="formdata.password2" type="password" auto-complete="off" placeholder="请再次输入更改密码" @blur="testPassword()"></el-input>
					    	
					    </el-form-item>
					   <span style="margin-left:120px;color:red;">{{this.errorText}}</span>
				  </el-form>
				  <div slot="footer" class="dialog-footer">
					    <el-button @click="dialogFormVisible = false">取 消</el-button>
					    <el-button type="primary" @click="modifyPassword()">确 定</el-button>
				  </div>
				</el-dialog>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>

import axios from 'axios'
import qs from 'qs'
import mailTable from '@/components/comp/MailTable'

  export default {
    created(){                   //乱，有时候：，有时候是（）
      this.getTableData();
    },
  	data() {
    	return {
				activeName2:'first',//标签页默认值
			form: {
		          name: 'admin',
		          password: 'admin'
		        },
    		data1: [{
    			label: '参数配置',
    			children: [{
    				id: 1,
    				label: '关系数据库元模型',
  				},
  				{
  					id: 2,
  					label: 'Kettle服务器',
  				}],

  			}],
			data2: [{
				label:"用户管理",          //这样写会和前面冲突
				children:[{
					id:3,
					label:'用户',
				},
				{
					id:4,
					label:'角色',
				},
				{
					id:5,
					label:'权限',
				}]
			}],
	  		dialogFormVisible:false, //对话框默认隐藏
	  		formdata: {
	          password: '',
	          password1:'',
	          password2:'',
	          desc: ''
	        },
	        errorText:'',
	        validatePassword:false,//确认密码验证
            formLabelWidth: '120px',
	        activeName: 'first',
	        tableData:[],
			defaultProps: {
				children: 'children',
				label: 'label'               //此处label对应上面data中的，可以改变
		        },
		    bread1: ''
	    };
  	},
    components:{
      mailTable
    },
  	methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleNodeClick(data) {
        console.log(data.label);
				this.bread1 = data.label
      },

      modifyPassword(){
      	let vm = this
 		if(vm.validatePassword){
 			vm.dialogFormVisible = false;
	 		let params = {
	              name: vm.form.name,
	              password:vm.formdata.password,
	              rePassword:vm.formdata.password1,
	            }
            axios.post('/System/modifyPassword', params)
          .then(function (response) {
            console.log(response.data.data);
            if(response.data.data.state==true){
            	vm.dialogFormVisible = false;
            	this.formdata.password='';
            	this.formdata.password1='';
 			    this.formdata.password2='';
            	alert(response.data.data.msg);
            }else{
            	alert(response.data.data.msg);
            	this.formdata.password='';
            	this.formdata.password1='';
 			    this.formdata.password2='';
            }
          })
          .catch(function (error) {
            console.log(error);
          });
 		}
      },
      testPassword(){
	      	let vm = this
	      	if(this.formdata.password1==this.formdata.password2){
	      		vm.errorText = '';
	      		vm.validatePassword=true;
	      	}else{
	      	    vm.errorText = '两次密码不一致';
	 			this.formdata.password1='';
	 			this.formdata.password2='';
	        }
        },
      getTableData(){
        let vm=this
        axios.get('/systemInfo/getSystemInfo')
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            // let tempTable = [];
            // console.log(typeof(tempTable));
            // tempTable.push(response.data.data);
            // vm.tableData = tempTable;
            vm.tableData=response.data.data;
            console.log(vm.tableData);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
  };


</script>


<style scoped>
.layout-relational{
	padding-left: 10px;
}
.layout-relational{
	padding-left: 10px;
}

.metaModel-add{
	position:relative;
	width: 30%;
}
.metaModel-delete{
	position:absolute;
	width: 30%;
	left: 35%;
}
.metaModel-modify{
	position:absolute;
	right: 0px;
	width: 30%;
}
.add{
    position: absolute;
    right: 0px;
  }
  .attributeList{
    font-size: 16px;
  }
.dataSource{
  background-color: #EBEEF5;
  height:355px;
  overflow-y: scroll;
  width:260px;

}
.elTree {
  font-size: 16px;
  background-color: #EBEEF5;
}
	.breadcrumb {
		margin-top: 10px;
		margin-bottom:10px;
	}
	.buttonGroup{
		margin-top: 10px;
	}
	.decorationLine{
	height:1px;
	width:100%;
	background:#E4E7ED;
	overflow:hidden;
	margin-top:20px;
	margin-bottom:20px;
	}
	.des{
		font-size: 16px;
	}
	.container {
	  height:400px;
	  overflow-y: scroll;
	  overflow-x: hidden;
	}
	.formStyle {
		width:70%;
		margin-left:15%;
		margin-right:15%;
		margin-top:5%
	}
</style>
